<template>
<el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item>
                <el-input v-model="dataForm.scenicSpotName" placeholder="景点名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="dataForm.scenicName" placeholder="所属区域" clearable style="width:100%">
                    <el-option v-for="item in scenicOptions" :key="item.id" :label="item.scenicName" :value="item.scenicName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.jointName" placeholder="套票名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="" prop="startPortName">
                <el-select style="width: 100%" v-model="dataForm.startPortNo" placeholder="出发港口" clearable>
                    <el-option v-for="(item, index) in startOptions" :key="index" :value="item.portNum" :label="item.portName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="endPortName">
                <el-select style="width: 100%" v-model="dataForm.endPortNo" placeholder="到达港口" clearable>
                    <el-option v-for="(item, index) in endOptions" :key="index" :value="item.portNum" :label="item.portName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column prop="jointName" label="套票名称" fixed="left" header-align="center" min-width="180" align="center"></el-table-column>
            <el-table-column prop="startPortName" label="起始港口" header-align="center" align="center"></el-table-column>
            <el-table-column prop="endPortName" label="停靠港口" header-align="center" align="center"></el-table-column>
            <el-table-column prop="scenicName" label="所属区域名称" header-align="center" align="center" min-width="150"></el-table-column>
            <el-table-column prop="boundNames" label="景区名称" header-align="center" align="center" min-width="250"></el-table-column>
            <el-table-column prop="type" label="联票类型" header-align="center" align="center" width="180">
                <template slot-scope="scope">
                    {{
              scope.row.type == 5
                ? "船+宿":"船+景"
            }}
                </template>
            </el-table-column>
             <el-table-column prop="startPrice" label="价格" header-align="center" align="center" min-width="120">
            </el-table-column>
             <el-table-column prop="coverImage" label="封面" header-align="center" align="center" min-width="150">
                <template slot-scope="scope">
                    <el-image :src="scope.row.coverImage" style="width:100px;height:100px" v-if="scope.row.coverImage"/>
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" header-align="center" align="center" min-width="150">
            </el-table-column>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" min-width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./hotel-add-or-update";
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: "/scenic/ticket/package/page",
                getDataListIsPage: true,
                deleteURL: "/scenic/ticket/package",
                deleteIsBatch: true,
            },
            placeInfo: null,
            startOptions: [],
            endOptions: [],
            scenicOptions:[],
            dataForm: {
                scenicSpotName:'',
                scenicName:'',
                jointName: '',
                startPortNo: '',
                endPortNo: '',
                startPortName: '',
                endPortName: '',
            },
        };
    },
    created() {
        Promise.all([this.queryOption(0), this.queryOption(1)]).then(() => {
            this.dataForm.startPortNo = null;
            this.dataForm.endPortNo = null;
        });
        this.getScenicOptions();
    },
    components: {
        AddOrUpdate,
    },
    methods: {
          getScenicOptions() {
            this.$http
                .get("scenic/isscenic/selectScenicList", {})
                .then(({
                    data: res
                }) => {
                    if (res.msg == "success") {
                        console.log(res)
                        this.scenicOptions = res.data;
                    }
                });
        },
        //港口
        queryOption(type) {
            this.$http
                .get("/travel/isshipport/listPort", {
                    params:{
                         type:type
                    }
                   
                })
                .then(({
                    data: res
                }) => {
                    switch (type) {
                        case 0:
                            this.startOptions = res.data;
                            break;
                        case 1:
                            this.endOptions = res.data;
                            break;
                    }
                });
        },
    },
};
</script>
